<!DOCTYPE html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>前端开发中79条不可忽视的知识点汇总 | 孙志豪的博客</title><meta name="author" content="孙志豪"><meta name="copyright" content="孙志豪"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="前端开发中79条不可忽视的知识点汇总1.css禁用鼠标事件12345.disabled &amp;#123;    pointer-events: none;    cursor: default;    opacity: 0.6;&amp;#125;  2.get&#x2F;post的理解和他们之间的区别http 超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。 HTTP 的工作方式是客户">
<meta property="og:type" content="article">
<meta property="og:title" content="前端开发中79条不可忽视的知识点汇总">
<meta property="og:url" content="https://szhihao.gitee.io/2022/10/11/03-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%AD79%E6%9D%A1%E4%B8%8D%E5%8F%AF%E5%BF%BD%E8%A7%86%E7%9A%84%E7%9F%A5%E8%AF%86%E7%82%B9%E6%B1%87%E6%80%BB/index.html">
<meta property="og:site_name" content="孙志豪的博客">
<meta property="og:description" content="前端开发中79条不可忽视的知识点汇总1.css禁用鼠标事件12345.disabled &amp;#123;    pointer-events: none;    cursor: default;    opacity: 0.6;&amp;#125;  2.get&#x2F;post的理解和他们之间的区别http 超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。 HTTP 的工作方式是客户">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://szhihao.gitee.io/img/%E5%A4%A9%E7%A9%BA.jpeg">
<meta property="article:published_time" content="2022-10-11T12:01:36.000Z">
<meta property="article:modified_time" content="2022-10-11T10:22:30.295Z">
<meta property="article:author" content="孙志豪">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://szhihao.gitee.io/img/%E5%A4%A9%E7%A9%BA.jpeg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://szhihao.gitee.io/2022/10/11/03-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%AD79%E6%9D%A1%E4%B8%8D%E5%8F%AF%E5%BF%BD%E8%A7%86%E7%9A%84%E7%9F%A5%E8%AF%86%E7%82%B9%E6%B1%87%E6%80%BB/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","languages":{"hits_empty":"We didn't find any results for the search: ${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: 'Copy successfully',
    error: 'Copy error',
    noSupport: 'The browser does not support'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: 'Just',
    min: 'minutes ago',
    hour: 'hours ago',
    day: 'days ago',
    month: 'months ago'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '前端开发中79条不可忽视的知识点汇总',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-10-11 18:22:30'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/img/%E5%A4%B4%E5%83%8F.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">44</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">15</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-archive"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photos/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 影视</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/links/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于笔者</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/img/%E5%A4%A9%E7%A9%BA.jpeg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">孙志豪的博客</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> Search</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-archive"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photos/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 影视</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/links/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于笔者</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">前端开发中79条不可忽视的知识点汇总</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">Created</span><time class="post-meta-date-created" datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2022-10-11T10:22:30.295Z" title="Updated 2022-10-11 18:22:30">2022-10-11</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/">前端（核心面试题）</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="前端开发中79条不可忽视的知识点汇总"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">Post View:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><hr>
<h1 id="前端开发中79条不可忽视的知识点汇总"><a href="#前端开发中79条不可忽视的知识点汇总" class="headerlink" title="前端开发中79条不可忽视的知识点汇总"></a>前端开发中79条不可忽视的知识点汇总</h1><h2 id="1-css禁用鼠标事件"><a href="#1-css禁用鼠标事件" class="headerlink" title="1.css禁用鼠标事件"></a>1.css禁用鼠标事件</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.<span class="property">disabled</span> &#123;</span><br><span class="line">    pointer-<span class="attr">events</span>: none;</span><br><span class="line">    <span class="attr">cursor</span>: <span class="keyword">default</span>;</span><br><span class="line">    <span class="attr">opacity</span>: <span class="number">0.6</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="2-get-x2F-post的理解和他们之间的区别"><a href="#2-get-x2F-post的理解和他们之间的区别" class="headerlink" title="2.get&#x2F;post的理解和他们之间的区别"></a>2.get&#x2F;post的理解和他们之间的区别</h2><h3 id="http"><a href="#http" class="headerlink" title="http"></a>http</h3><blockquote>
<p>超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。 HTTP 的工作方式是客户机与服务器之间的请求-应答协议。 web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。</p>
</blockquote>
<h3 id="http方法："><a href="#http方法：" class="headerlink" title="http方法："></a>http方法：</h3><blockquote>
<p>HEAD: 与 GET 相同，但只返回 HTTP 报头，不返回文档主体 PUT: 上传指定的 URI 表示 DELETE: 删除指定资源 OPTIONS: 返回服务器支持的 HTTP 方法 CONNECT: 把请求连接转换到透明的 TCP&#x2F;IP 通道 POST: 向指定的资源提交要被处理的数据</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">// 查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的</span><br><span class="line">POST /test/demo_form.asp HTTP/1.1</span><br><span class="line">Host: w3schools.com</span><br><span class="line">name1=value1&amp;name2=value2</span><br></pre></td></tr></table></figure>

<blockquote>
<p>GET: 从指定的资源请求数据</p>
</blockquote>
<h3 id="GET和POST的区别"><a href="#GET和POST的区别" class="headerlink" title="GET和POST的区别"></a>GET和POST的区别</h3><blockquote>
<p>GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制(2048字符),IE和Safari浏览器限制2k;Opera限制4k;Firefox，Chrome限制8k GET 请求只应当用于取回数据</p>
</blockquote>
<blockquote>
<p>POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求</p>
</blockquote>
<h2 id="3-实现条纹网格的方式"><a href="#3-实现条纹网格的方式" class="headerlink" title="3.实现条纹网格的方式"></a>3.实现条纹网格的方式</h2><blockquote>
<ol>
<li>nth-child(even&#x2F;odd)</li>
</ol>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// odd表示基数，此时选中基数行的样式，even表示偶数行</span></span><br><span class="line">.<span class="property">row</span>:nth-<span class="title function_">child</span>(<span class="params">odd</span>)&#123;</span><br><span class="line">    <span class="attr">background</span>: #eee;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<ol>
<li>nth-of-type(odd)</li>
</ol>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.<span class="property">row</span>:nth-<span class="keyword">of</span>-<span class="title function_">type</span>(<span class="params">odd</span>)&#123;</span><br><span class="line">    <span class="attr">background</span>: #eee;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<ol>
<li>渐变实现linear-gradient</li>
</ol>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.<span class="property">stripe</span>-bg&#123;</span><br><span class="line">  <span class="attr">padding</span>: .5em;</span><br><span class="line">  line-<span class="attr">height</span>: <span class="number">1.</span>5em;</span><br><span class="line">  <span class="attr">background</span>: beige;</span><br><span class="line">  background-<span class="attr">size</span>: auto 3em;</span><br><span class="line">  background-<span class="attr">origin</span>: content-box;</span><br><span class="line">  background-<span class="attr">image</span>: linear-<span class="title function_">gradient</span>(<span class="title function_">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">.2</span>) <span class="number">50</span>%, transparent <span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="4-js求平面两点之间的距离"><a href="#4-js求平面两点之间的距离" class="headerlink" title="4.js求平面两点之间的距离"></a>4.js求平面两点之间的距离</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据可以以数组方式存储，也可以是对象方式</span></span><br><span class="line"><span class="keyword">let</span> a = &#123;<span class="attr">x</span>:<span class="string">&#x27;6&#x27;</span>, <span class="attr">y</span>:<span class="number">10</span>&#125;,</span><br><span class="line">        b = &#123;<span class="attr">x</span>: <span class="number">8</span>, <span class="attr">y</span>: <span class="number">20</span>&#125;;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">distant</span>(<span class="params">a,b</span>)&#123;</span><br><span class="line">        <span class="keyword">let</span> dx = <span class="title class_">Number</span>(a.<span class="property">x</span>) - <span class="title class_">Number</span>(b.<span class="property">x</span>)</span><br><span class="line">        <span class="keyword">let</span> dy = <span class="title class_">Number</span>(a.<span class="property">y</span>) - <span class="title class_">Number</span>(b.<span class="property">y</span>)</span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">pow</span>(dx*dx + dy*dy, <span class="number">.5</span>)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h2 id="5-css禁止用户选择"><a href="#5-css禁止用户选择" class="headerlink" title="5.css禁止用户选择"></a>5.css禁止用户选择</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">body&#123;</span><br><span class="line">-webkit-touch-<span class="attr">callout</span>: none;</span><br><span class="line">-webkit-user-<span class="attr">select</span>: none;</span><br><span class="line">-khtml-user-<span class="attr">select</span>: none;</span><br><span class="line">-moz-user-<span class="attr">select</span>: none;</span><br><span class="line">-ms-user-<span class="attr">select</span>: none;</span><br><span class="line">user-<span class="attr">select</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="6-数组去重"><a href="#6-数组去重" class="headerlink" title="6.数组去重"></a>6.数组去重</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// indexOf实现</span></span><br><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>, <span class="number">1</span>, <span class="string">&#x27;1&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">unique</span>(<span class="params">array</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> res = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = array.<span class="property">length</span>; i &lt; len; i++) &#123;</span><br><span class="line">        <span class="keyword">var</span> current = array[i];</span><br><span class="line">        <span class="keyword">if</span> (res.<span class="title function_">indexOf</span>(current) === -<span class="number">1</span>) &#123;</span><br><span class="line">            res.<span class="title function_">push</span>(current)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">unique</span>(array));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 排序后去重</span></span><br><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>, <span class="number">1</span>, <span class="string">&#x27;1&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">unique</span>(<span class="params">array</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> res = [];</span><br><span class="line">    <span class="keyword">var</span> sortedArray = array.<span class="title function_">concat</span>().<span class="title function_">sort</span>();</span><br><span class="line">    <span class="keyword">var</span> seen;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = sortedArray.<span class="property">length</span>; i &lt; len; i++) &#123;</span><br><span class="line">        <span class="comment">// 如果是第一个元素或者相邻的元素不相同</span></span><br><span class="line">        <span class="keyword">if</span> (!i || seen !== sortedArray[i]) &#123;</span><br><span class="line">            res.<span class="title function_">push</span>(sortedArray[i])</span><br><span class="line">        &#125;</span><br><span class="line">        seen = sortedArray[i];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">unique</span>(array));</span><br><span class="line"></span><br><span class="line"><span class="comment">// filter实现</span></span><br><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="string">&#x27;1&#x27;</span>];</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">unique</span>(<span class="params">array</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> res = array.<span class="title function_">filter</span>(<span class="keyword">function</span>(<span class="params">item, index, array</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> array.<span class="title function_">indexOf</span>(item) === index;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">unique</span>(array));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 排序去重</span></span><br><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="string">&#x27;1&#x27;</span>];</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">unique</span>(<span class="params">array</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> array.<span class="title function_">concat</span>().<span class="title function_">sort</span>().<span class="title function_">filter</span>(<span class="keyword">function</span>(<span class="params">item, index, array</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> !index || item !== array[index - <span class="number">1</span>]</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">unique</span>(array));</span><br><span class="line"></span><br><span class="line"><span class="comment">// Object键值对</span></span><br><span class="line"><span class="keyword">var</span> array = [&#123;<span class="attr">value</span>: <span class="number">1</span>&#125;, &#123;<span class="attr">value</span>: <span class="number">1</span>&#125;, &#123;<span class="attr">value</span>: <span class="number">2</span>&#125;];</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">unique</span>(<span class="params">array</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line">    <span class="keyword">return</span> array.<span class="title function_">filter</span>(<span class="keyword">function</span>(<span class="params">item, index, array</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> item + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(item))</span><br><span class="line">        <span class="keyword">return</span> obj.<span class="title function_">hasOwnProperty</span>(<span class="keyword">typeof</span> item + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(item)) ? <span class="literal">false</span> : (obj[<span class="keyword">typeof</span> item + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(item)] = <span class="literal">true</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">unique</span>(array)); <span class="comment">// [&#123;value: 1&#125;, &#123;value: 2&#125;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ES6 Set实现</span></span><br><span class="line"><span class="keyword">var</span> <span class="title function_">unique</span> = (<span class="params">a</span>) =&gt; [...<span class="keyword">new</span> <span class="title class_">Set</span>(a)]</span><br></pre></td></tr></table></figure>

<h2 id="7-什么是CDN和CDN的好处"><a href="#7-什么是CDN和CDN的好处" class="headerlink" title="7.什么是CDN和CDN的好处"></a>7.什么是CDN和CDN的好处</h2><blockquote>
<p>CDN:CDN是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。 好处： 1、多域名加载资源 一般情况下，浏览器都会对单个域名下的并发请求数（文件加载）进行限制，通常最多有4个，那么第5个加载项将会被阻塞，直到前面的某一个文件加载完毕。 因为CDN文件是存放在不同区域（不同IP）的，所以对浏览器来说是可以同时加载页面所需的所有文件（远不止4个），从而提高页面加载速度。</p>
</blockquote>
<p>2、文件可能已经被加载过并保存有缓存 一些通用的js库或者是css样式库，如jQuery，在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候，很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站，恰巧这个网站同样也使用了jQuery，那么此时用户浏览器已经缓存有该jQuery文件（同IP的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再进行加载），所以就不会再加载一次了，从而间接的提高了网站的访问速度</p>
<p>3、高效率 你的网站做的再NB也不会NB过百度NB过Google吧？一个好的CDNs会提供更高的效率，更低的网络延时和更小的丢包率。</p>
<p>4、分布式的数据中心 假如你的站点布置在北京，当一个香港或者更远的用户访问你的站点的时候，他的数据请求势必会很慢很慢。而CDNs则会让用户从离他最近的节点去加载所需的文件，所以加载速度提升就是理所当然的了。</p>
<p>5、使用情况分析 一般情况下CDNs提供商（如百度云加速）都会提供数据统计功能，可以了解更多关于用户访问自己网站的情况，可以根据统计数据对自己的站点适时适当的做出些许调整。</p>
<p>6、有效防止网站被攻击 一般情况下CDNs提供商也是会提供网站安全服务的</p>
<h2 id="8-圣杯布局和双飞翼布局"><a href="#8-圣杯布局和双飞翼布局" class="headerlink" title="8.圣杯布局和双飞翼布局"></a>8.圣杯布局和双飞翼布局</h2><blockquote>
<p><a href="https://link.juejin.cn/?target=https://www.jianshu.com/p/f9bcddb0e8b4">参考连接</a></p>
</blockquote>
<h2 id="9-正则表达式匹配手机号"><a href="#9-正则表达式匹配手机号" class="headerlink" title="9.正则表达式匹配手机号"></a>9.正则表达式匹配手机号</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">checkPhone</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(!(<span class="regexp">/^1[345678]\d&#123;9&#125;$/</span>.<span class="title function_">test</span>(phone)))&#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&quot;手机号码有误，请重填&quot;</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="10-如何提高首频加载速度"><a href="#10-如何提高首频加载速度" class="headerlink" title="10.如何提高首频加载速度"></a>10.如何提高首频加载速度</h2><blockquote>
<p>1.js外联文件放到body底部，css外联文件放到head内 2.http静态资源尽量用多个子域名 3.服务器端提供html和http静态资源时最好开启gzip 4.在js,css,img等资源响应的http headers里设置expires,last-modified 5.尽量减少http requests的数量 6.js&#x2F;css&#x2F;html&#x2F;img资源压缩 7.使用css spirtes，可以减少img请求次数 8.大图使用lazyload懒加载 9.避免404，减少外联js 10.减少cookie大小可以提高获得响应的时间 11.减少dom elements的数量 12.使用异步脚本，动态创建脚本</p>
</blockquote>
<h2 id="11-浏览器内核-渲染引擎"><a href="#11-浏览器内核-渲染引擎" class="headerlink" title="11.浏览器内核(渲染引擎)"></a>11.浏览器内核(渲染引擎)</h2><blockquote>
<p>IE&#x2F;360&#x2F;搜狗浏览器: Trident Chrome&#x2F;Safari&#x2F;Opera: WebKit(KHTML的一个开源的分支) (虽然我们称WebKit为浏览器内核，但不太适合直接称渲染引擎，因为WebKit本身主要是由两个引擎构成的，一个正是渲染引擎“WebCore”，另一个则是javascript解释引擎“JSCore”，它们均是从KDE的渲染引擎KHTML及javascript解释引擎KJS衍生而来。) (在13年发布的Chrome 28.0.1469.0版本开始，Chrome放弃Chromium引擎转而使用最新的Blink引擎（基于WebKit2——苹果公司于2010年推出的新的WebKit引擎），Blink对比上一代的引擎精简了代码、改善了DOM框架，也提升了安全性。) (为了减少研发成本，Opera在2013年2月宣布放弃Presto，转而跟随Chrome使用WebKit分支的Chromium引擎作为自家浏览器核心引擎) Firefox&#x2F;SeaMonkey: Gecko</p>
</blockquote>
<h2 id="12-浏览器渲染过程及优化建议"><a href="#12-浏览器渲染过程及优化建议" class="headerlink" title="12.浏览器渲染过程及优化建议"></a>12.浏览器渲染过程及优化建议</h2><blockquote>
<p>1）解析： 一个是HTML&#x2F;SVG&#x2F;XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS，解析CSS会产生CSS规则树。 Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2）渲染：浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意： Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。 CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。 然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。 3）绘制：最后通过调用操作系统Native GUI的API绘制。</p>
</blockquote>
<blockquote>
<p>减少reflow和repaint 1）不要一条一条地修改DOM的样式。还不如预先定义好css的class，然后修改DOM的className。</p>
</blockquote>
<ol>
<li>把DOM离线后修改。如： 使用documentFragment 对象在内存里操作DOM 先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。 clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。 3）不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性 4）为动画的HTML元件使用fixed或absoulte的position，尽量使用transfoem，那么修改他们的CSS是不会reflow的 5）尽量少使用table布局。因为可能很小的一个小改动会造成整个table的重新布局</li>
</ol>
<h2 id="13-页面导入样式时，使用link和-import有什么区别？"><a href="#13-页面导入样式时，使用link和-import有什么区别？" class="headerlink" title="13. 页面导入样式时，使用link和@import有什么区别？"></a>13. 页面导入样式时，使用link和@import有什么区别？</h2><blockquote>
<p>（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; (4)link支持使用js控制DOM去改变样式，而@import不支持;</p>
</blockquote>
<h2 id="14-简述一下你对HTML语义化的理解？"><a href="#14-简述一下你对HTML语义化的理解？" class="headerlink" title="14. 简述一下你对HTML语义化的理解？"></a>14. 简述一下你对HTML语义化的理解？</h2><blockquote>
<p>用正确的标签做正确的事情。 html语义化让页面的内容结构化，便于对浏览器、搜索引擎解析; 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO; 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。</p>
</blockquote>
<h2 id="15-请描述一下-cookies，sessionStorage-和-localStorage-的区别？"><a href="#15-请描述一下-cookies，sessionStorage-和-localStorage-的区别？" class="headerlink" title="15. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？"></a>15. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？</h2><p>cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。</p>
<p>存储大小： cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。</p>
<p>有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭</p>
<h2 id="16-iframe有那些缺点？"><a href="#16-iframe有那些缺点？" class="headerlink" title="16. iframe有那些缺点？"></a>16. iframe有那些缺点？</h2><p>*iframe会阻塞主页面的Onload事件； *搜索引擎的检索程序无法解读这种页面，不利于SEO; *iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以绕开以上两个问题。</p>
<h2 id="17-vue父子组件生命周期的顺序及作用？"><a href="#17-vue父子组件生命周期的顺序及作用？" class="headerlink" title="17. vue父子组件生命周期的顺序及作用？"></a>17. vue父子组件生命周期的顺序及作用？</h2><p><img src= "" data-lazy-src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/9/30/16d82dbbdae421ec~tplv-t2oaga2asx-watermark.awebp" alt="img"></p>
<p>（图片来自vue官网，更多vue学习推荐去官网查看详细文档）</p>
<h2 id="18-网页验证码是干嘛的，是为了解决什么安全问题？"><a href="#18-网页验证码是干嘛的，是为了解决什么安全问题？" class="headerlink" title="18. 网页验证码是干嘛的，是为了解决什么安全问题？"></a>18. 网页验证码是干嘛的，是为了解决什么安全问题？</h2><blockquote>
<p>区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水； 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。</p>
</blockquote>
<h2 id="19-介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？"><a href="#19-介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？" class="headerlink" title="19. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？"></a>19. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？</h2><blockquote>
<p>（1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)； （3）区 别： IE的content部分把 border 和 padding计算了进去;</p>
</blockquote>
<h2 id="20-position的值relative和absolute定位原点是？"><a href="#20-position的值relative和absolute定位原点是？" class="headerlink" title="20. position的值relative和absolute定位原点是？"></a>20. position的值relative和absolute定位原点是？</h2><blockquote>
<p>absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 inherit 规定从父元素继承 position 属性的值。</p>
</blockquote>
<h2 id="21-经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧-？"><a href="#21-经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧-？" class="headerlink" title="21. 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？"></a>21. 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？</h2><blockquote>
<ul>
<li>png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.</li>
</ul>
</blockquote>
<ul>
<li><p>浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。</p>
</li>
<li><p>IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。</p>
<p>浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}</p>
<p>这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)</p>
<p>渐进识别的方式，从总体中逐渐排除局部。</p>
<p>首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。</p>
<p>css .bb{ background-color:red;&#x2F;<em>所有识别</em>&#x2F; background-color:#00deff\9; &#x2F;<em>IE6、7、8识别</em>&#x2F; +background-color:#a200ff;&#x2F;<em>IE6、7识别</em>&#x2F; _background-color:#1e0bd1;&#x2F;<em>IE6识别</em>&#x2F; }</p>
</li>
<li><p>IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。 解决方法:统一通过getAttribute()获取自定义属性。</p>
</li>
<li><p>IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。</p>
</li>
<li><p>解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。</p>
</li>
<li><p>Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。</p>
</li>
</ul>
<p>超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}</p>
<h2 id="22-CSS优化、提高性能的方法有哪些？"><a href="#22-CSS优化、提高性能的方法有哪些？" class="headerlink" title="22. CSS优化、提高性能的方法有哪些？"></a>22. CSS优化、提高性能的方法有哪些？</h2><blockquote>
<p>关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）； 如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）； 提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性; 使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；</p>
</blockquote>
<h2 id="23-如何修改chrome记住密码后自动填充表单的黄色背景-？"><a href="#23-如何修改chrome记住密码后自动填充表单的黄色背景-？" class="headerlink" title="23. 如何修改chrome记住密码后自动填充表单的黄色背景 ？"></a>23. 如何修改chrome记住密码后自动填充表单的黄色背景 ？</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill &#123;</span><br><span class="line">   background-color: rgb(250, 255, 189); /* #FAFFBD; */</span><br><span class="line">   background-image: none;</span><br><span class="line">   color: rgb(0, 0, 0);</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<h2 id="24-让页面里的字体变清晰，变细用CSS怎么做？"><a href="#24-让页面里的字体变清晰，变细用CSS怎么做？" class="headerlink" title="24. 让页面里的字体变清晰，变细用CSS怎么做？"></a>24. 让页面里的字体变清晰，变细用CSS怎么做？</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">-webkit-font-<span class="attr">smoothing</span>: antialiased;</span><br></pre></td></tr></table></figure>

<h2 id="25-让overflow-scroll平滑滚动？"><a href="#25-让overflow-scroll平滑滚动？" class="headerlink" title="25. 让overflow:scroll平滑滚动？"></a>25. 让overflow:scroll平滑滚动？</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">-webkit-overflow-<span class="attr">scrolling</span>: touch;</span><br></pre></td></tr></table></figure>

<h2 id="26-如何将浮点数点左边的数每三位添加一个逗号，如12000000-11转化为『12-000-000-11』"><a href="#26-如何将浮点数点左边的数每三位添加一个逗号，如12000000-11转化为『12-000-000-11』" class="headerlink" title="26. 如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为『12,000,000.11』?"></a>26. 如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为『12,000,000.11』?</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">commafy</span>(<span class="params">num</span>)&#123;</span><br><span class="line">  	<span class="keyword">return</span> num &amp;&amp; num</span><br><span class="line">  		.<span class="title function_">toString</span>()</span><br><span class="line">  		.<span class="title function_">replace</span>(<span class="regexp">/(\d)(?=(\d&#123;3&#125;)+\.)/g</span>, <span class="keyword">function</span>(<span class="params">$<span class="number">1</span>, $<span class="number">2</span></span>)&#123;</span><br><span class="line">  			<span class="keyword">return</span> $<span class="number">2</span> + <span class="string">&#x27;,&#x27;</span>;</span><br><span class="line">  		&#125;);</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h2 id="27-Javascript作用链域"><a href="#27-Javascript作用链域" class="headerlink" title="27. Javascript作用链域?"></a>27. Javascript作用链域?</h2><blockquote>
<p>全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。 当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找， 直至全局函数，这种组织形式就是作用域链。</p>
</blockquote>
<h2 id="28-谈谈This对象的理解。"><a href="#28-谈谈This对象的理解。" class="headerlink" title="28. 谈谈This对象的理解。"></a>28. 谈谈This对象的理解。</h2><blockquote>
<p>this总是指向函数的直接调用者（而非间接调用者）； 如果有new关键字，this指向new出来的那个对象； 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；</p>
</blockquote>
<h2 id="29-eval是做什么的？"><a href="#29-eval是做什么的？" class="headerlink" title="29. eval是做什么的？"></a>29. eval是做什么的？</h2><blockquote>
<p>它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 由JSON字符串转换为JSON对象的时候可以用eval，var obj &#x3D;eval(‘(‘+ str +’)’);</p>
</blockquote>
<h2 id="30-什么是window对象-什么是document对象"><a href="#30-什么是window对象-什么是document对象" class="headerlink" title="30. 什么是window对象? 什么是document对象?"></a>30. 什么是window对象? 什么是document对象?</h2><blockquote>
<p>window对象是指浏览器打开的窗口。 document对象是Documentd对象（HTML 文档对象）的一个只读引用，window对象的一个属性。</p>
</blockquote>
<h2 id="31-“1”-“2”-“3”-map-parseInt-答案是多少？"><a href="#31-“1”-“2”-“3”-map-parseInt-答案是多少？" class="headerlink" title="31. [“1”, “2”, “3”].map(parseInt) 答案是多少？"></a>31. [“1”, “2”, “3”].map(parseInt) 答案是多少？</h2><blockquote>
<p>[“1”, “2”, “3”].map(parseInt) 答案也就是：[1, NaN, NaN]</p>
</blockquote>
<h2 id="32-什么是闭包（closure），为什么要用它？"><a href="#32-什么是闭包（closure），为什么要用它？" class="headerlink" title="32. 什么是闭包（closure），为什么要用它？"></a>32. 什么是闭包（closure），为什么要用它？</h2><blockquote>
<p>闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。</p>
</blockquote>
<h2 id="33-javascript-代码中的”use-strict”-是什么意思-使用它区别是什么？"><a href="#33-javascript-代码中的”use-strict”-是什么意思-使用它区别是什么？" class="headerlink" title="33. javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？"></a>33. javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？</h2><blockquote>
<p>使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。 默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值; 全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用； 保证代码运行的安全,限制函数中的arguments修改; 提高编译器效率，增加运行速度；</p>
</blockquote>
<h2 id="34-如何判断一个对象是否属于某个类？"><a href="#34-如何判断一个对象是否属于某个类？" class="headerlink" title="34. 如何判断一个对象是否属于某个类？"></a>34. 如何判断一个对象是否属于某个类？</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(a <span class="keyword">instanceof</span> <span class="title class_">Person</span>)&#123;</span><br><span class="line">   <span class="title function_">alert</span>(<span class="string">&#x27;yes&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 判断对象类型最好的方式</span></span><br><span class="line"><span class="comment">// 对于 Object 对象，直接调用 toString()  就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="string">&#x27;&#x27;</span>) ;   <span class="comment">// [object String]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="number">1</span>) ;    <span class="comment">// [object Number]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="literal">true</span>) ; <span class="comment">// [object Boolean]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="title class_">Symbol</span>()); <span class="comment">//[object Symbol]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="literal">undefined</span>) ; <span class="comment">// [object Undefined]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="literal">null</span>) ; <span class="comment">// [object Null]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="keyword">new</span> <span class="title class_">Function</span>()) ; <span class="comment">// [object Function]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="keyword">new</span> <span class="title class_">Date</span>()) ; <span class="comment">// [object Date]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>([]) ; <span class="comment">// [object Array]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="keyword">new</span> <span class="title class_">RegExp</span>()) ; <span class="comment">// [object RegExp]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="keyword">new</span> <span class="title class_">Error</span>()) ; <span class="comment">// [object Error]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="variable language_">document</span>) ; <span class="comment">// [object HTMLDocument]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="variable language_">window</span>) ; <span class="comment">//[object global] window 是全局对象 global 的引用</span></span><br></pre></td></tr></table></figure>

<h2 id="35-new一个对象的过程"><a href="#35-new一个对象的过程" class="headerlink" title="35. new一个对象的过程"></a>35. new一个对象的过程</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。</span><br><span class="line">2、属性和方法被加入到 this 引用的对象中。</span><br><span class="line">3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。</span><br></pre></td></tr></table></figure>

<h2 id="36-Ajax-解决浏览器缓存问题"><a href="#36-Ajax-解决浏览器缓存问题" class="headerlink" title="36. Ajax 解决浏览器缓存问题"></a>36. Ajax 解决浏览器缓存问题</h2><blockquote>
<p>1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0”)。</p>
</blockquote>
<p>2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”)。 3、在URL后面加上一个随机数： “fresh&#x3D;” + Math.random();。 4、在URL后面加上时间戳：”nowtime&#x3D;” + new Date().getTime();。 5、如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。</p>
<h2 id="37-如何解决跨域问题"><a href="#37-如何解决跨域问题" class="headerlink" title="37. 如何解决跨域问题?"></a>37. 如何解决跨域问题?</h2><blockquote>
<p>jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面</p>
</blockquote>
<h2 id="38-模块化开发怎么做"><a href="#38-模块化开发怎么做" class="headerlink" title="38. 模块化开发怎么做"></a>38. 模块化开发怎么做</h2><blockquote>
<p>立即执行函数,不暴露私有成员</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">var module1 = (function()&#123;</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;var _count = 0;</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;var m1 = function()&#123;</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;//...</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&#125;;</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;var m2 = function()&#123;</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;//...</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&#125;;</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;return &#123;</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;m1 : m1,</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;m2 : m2</span><br><span class="line">     &amp;emsp;&amp;emsp;&amp;emsp;&amp;emsp;&#125;;</span><br><span class="line">     &amp;emsp;&amp;emsp;&#125;)();</span><br></pre></td></tr></table></figure>

<h2 id="39-AMD（Modules-x2F-Asynchronous-Definition）、CMD（Common-Module-Definition）规范区别？"><a href="#39-AMD（Modules-x2F-Asynchronous-Definition）、CMD（Common-Module-Definition）规范区别？" class="headerlink" title="39. AMD（Modules&#x2F;Asynchronous-Definition）、CMD（Common Module Definition）规范区别？"></a>39. AMD（Modules&#x2F;Asynchronous-Definition）、CMD（Common Module Definition）规范区别？</h2><blockquote>
<ol>
<li>对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。 2. CMD 推崇依赖就近，AMD 推崇依赖前置。</li>
</ol>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">// CMD</span><br><span class="line"> define(function(require, exports, module) &#123;</span><br><span class="line">     var a = require(&#x27;./a&#x27;)</span><br><span class="line">     a.doSomething()</span><br><span class="line">     // 此处略去 100 行</span><br><span class="line">     var b = require(&#x27;./b&#x27;) // 依赖可以就近书写</span><br><span class="line">     b.doSomething()</span><br><span class="line">     // ...</span><br><span class="line"> &#125;)</span><br><span class="line"></span><br><span class="line"> // AMD 默认推荐</span><br><span class="line"> define([&#x27;./a&#x27;, &#x27;./b&#x27;], function(a, b) &#123; // 依赖必须一开始就写好</span><br><span class="line">     a.doSomething()</span><br><span class="line">     // 此处略去 100 行</span><br><span class="line">     b.doSomething()</span><br><span class="line">     // ...</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>

<h2 id="40-requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何-缓存的？）"><a href="#40-requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何-缓存的？）" class="headerlink" title="40. requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）"></a>40. requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）</h2><blockquote>
<p><a href="https://link.juejin.cn/?target=https://blog.csdn.net/cde7070/article/details/65935888">参考链接</a></p>
</blockquote>
<h2 id="41-如何实现一个模块加载器"><a href="#41-如何实现一个模块加载器" class="headerlink" title="41. 如何实现一个模块加载器"></a>41. 如何实现一个模块加载器</h2><blockquote>
<p><a href="https://link.juejin.cn/?target=https://purplebamboo.github.io/2015/01/17/javascript-module/">参考连接</a></p>
</blockquote>
<h2 id="42-列举几条-JavaScript-的基本代码规范"><a href="#42-列举几条-JavaScript-的基本代码规范" class="headerlink" title="42. 列举几条 JavaScript 的基本代码规范"></a>42. 列举几条 JavaScript 的基本代码规范</h2><blockquote>
<p>（1）不要在同一行声明多个变量 （2）如果你不知道数组的长度，使用 push （3）请使用 &#x3D;&#x3D;&#x3D;&#x2F;!&#x3D;&#x3D; 来比较 true&#x2F;false 或者数值 （4）对字符串使用单引号 ‘’(因为大多时候我们的字符串。特别html会出现”) （5）使用对象字面量替代 new Array 这种形式 （6）绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同 （7）不要使用全局函数 （8）总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间 （9）Switch 语句必须带有 default 分支 （10）使用 &#x2F;**…*&#x2F; 进行多行注释，包括描述，指定类型以及参数值和返回值 （11）函数不应该有时候有返回值，有时候没有返回值 （12）语句结束一定要加分号 （13）for 循环必须使用大括号 （14）if 语句必须使用大括号 （15）for-in 循环中的变量应该使用 var 关键字明确限定作用域，从而避免作用域污染 （16）避免单个字符名，让你的变量名有描述意义 （17）当命名对象、函数和实例时使用驼峰命名规则 （18）给对象原型分配方法，而不是用一个新的对象覆盖原型，覆盖原型会使继承出现问题</p>
</blockquote>
<h2 id="43-DOM操作——怎样添加、移除、移动、复制、创建和查找节点"><a href="#43-DOM操作——怎样添加、移除、移动、复制、创建和查找节点" class="headerlink" title="43. DOM操作——怎样添加、移除、移动、复制、创建和查找节点?"></a>43. DOM操作——怎样添加、移除、移动、复制、创建和查找节点?</h2><blockquote>
<p>1）创建新节点 createDocumentFragment() &#x2F;&#x2F;创建一个DOM片段 createElement() &#x2F;&#x2F;创建一个具体的元素 createTextNode() &#x2F;&#x2F;创建一个文本节点 （2）添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() &#x2F;&#x2F;在已有的子节点前插入一个新的子节点 （3）查找 getElementsByTagName() &#x2F;&#x2F;通过标签名称 getElementsByName() &#x2F;&#x2F;通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的) getElementById() &#x2F;&#x2F;通过元素Id，唯一性</p>
</blockquote>
<h2 id="44-jquery实现原理"><a href="#44-jquery实现原理" class="headerlink" title="44. jquery实现原理"></a>44. jquery实现原理</h2><blockquote>
<p><a href="https://link.juejin.cn/?target=http://www.zhangxinxu.com/wordpress/2013/07/jquery-%E5%8E%9F%E7%90%86-%E6%9C%BA%E5%88%B6/">参考链接</a></p>
</blockquote>
<h2 id="45-jquery中如何将数组转化为json字符串，然后再转化回来？"><a href="#45-jquery中如何将数组转化为json字符串，然后再转化回来？" class="headerlink" title="45. jquery中如何将数组转化为json字符串，然后再转化回来？"></a>45. jquery中如何将数组转化为json字符串，然后再转化回来？</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展： </span><br><span class="line"> $.fn.<span class="property">stringifyArray</span> = <span class="keyword">function</span>(<span class="params">array</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(array)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    $.fn.<span class="property">parseArray</span> = <span class="keyword">function</span>(<span class="params">array</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">JSON</span>.<span class="title function_">parse</span>(array)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    然后调用：</span><br><span class="line">    $.fn.<span class="title function_">stringifyArray</span>(array)</span><br></pre></td></tr></table></figure>

<h2 id="46-jquery的-extend深复制和浅复制原理"><a href="#46-jquery的-extend深复制和浅复制原理" class="headerlink" title="46. jquery的$.extend深复制和浅复制原理"></a>46. jquery的$.extend深复制和浅复制原理</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 浅复制</span></span><br><span class="line">$ = &#123; </span><br><span class="line"></span><br><span class="line">     extend : <span class="keyword">function</span>(<span class="params">target, options</span>) &#123; </span><br><span class="line"></span><br><span class="line">        <span class="keyword">for</span> (name <span class="keyword">in</span> options) &#123; </span><br><span class="line"></span><br><span class="line">            target[name] = options[name]; </span><br><span class="line"></span><br><span class="line">        &#125; </span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> target; </span><br><span class="line"></span><br><span class="line">    &#125; </span><br><span class="line"></span><br><span class="line">&#125;; </span><br><span class="line"><span class="comment">// 深复制</span></span><br><span class="line">$ = &#123; </span><br><span class="line">   extend : <span class="keyword">function</span>(<span class="params">deep, target, options</span>) &#123; </span><br><span class="line">       <span class="keyword">for</span> (name <span class="keyword">in</span> options) &#123; </span><br><span class="line">           copy = options[name]; </span><br><span class="line">           <span class="keyword">if</span> (deep &amp;&amp; copy <span class="keyword">instanceof</span> <span class="title class_">Array</span>) &#123; </span><br><span class="line">               target[name] = $.<span class="title function_">extend</span>(deep, [], copy); </span><br><span class="line">           &#125; <span class="keyword">else</span> <span class="keyword">if</span> (deep &amp;&amp; copy <span class="keyword">instanceof</span> <span class="title class_">Object</span>) &#123; </span><br><span class="line"></span><br><span class="line">              target[name] = $.<span class="title function_">extend</span>(deep, &#123;&#125;, copy); </span><br><span class="line">           &#125; <span class="keyword">else</span> &#123; </span><br><span class="line">              target[name] = options[name]; </span><br><span class="line">          &#125; </span><br><span class="line">      &#125; </span><br><span class="line"></span><br><span class="line">     <span class="keyword">return</span> target; </span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="47-jquery-extend-与-jquery-fn-extend的区别？"><a href="#47-jquery-extend-与-jquery-fn-extend的区别？" class="headerlink" title="47. jquery.extend 与 jquery.fn.extend的区别？"></a>47. jquery.extend 与 jquery.fn.extend的区别？</h2><blockquote>
<ul>
<li>jquery.extend 为jquery类添加类方法，可以理解为添加静态方法</li>
</ul>
</blockquote>
<ul>
<li>jquery.fn.extend: 源码中jquery.fn &#x3D; jquery.prototype，所以对jquery.fn的扩展，就是为jquery类添加成员函数 使用： jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用。</li>
</ul>
<h2 id="48-如何判断当前脚本运行在浏览器还是node环境中？（阿里）"><a href="#48-如何判断当前脚本运行在浏览器还是node环境中？（阿里）" class="headerlink" title="48. 如何判断当前脚本运行在浏览器还是node环境中？（阿里）"></a>48. 如何判断当前脚本运行在浏览器还是node环境中？（阿里）</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span> === <span class="variable language_">window</span> ? <span class="string">&#x27;browser&#x27;</span> : <span class="string">&#x27;node&#x27;</span>;</span><br></pre></td></tr></table></figure>

<h2 id="49-实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？"><a href="#49-实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？" class="headerlink" title="49. 实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？"></a>49. 实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？</h2><blockquote>
<p><a href="https://link.juejin.cn/?target=http://www.haorooms.com/post/ajax_historybackprev">参考链接</a></p>
</blockquote>
<h2 id="50-把-Script-标签-放在页面的最底部的body封闭之前-和封闭之后有什么区别？浏览器会如何解析它们？"><a href="#50-把-Script-标签-放在页面的最底部的body封闭之前-和封闭之后有什么区别？浏览器会如何解析它们？" class="headerlink" title="50. 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？"></a>50. 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？</h2><blockquote>
<p>之前推荐的方法（已过时）：之前解决这个问题的方法是把script标签放到body标签之后 ，这确保了解析到</body>之前都不会被script终端。这个方法是有问题的: 浏览器在整个文档解析完成之前都不能下载script文件，如果文档很大的话，解析完HTML，用户依然要等待script文件下载并执行完成之后，才能操作这个网站。</p>
</blockquote>
<blockquote>
<p>现在推荐的解决方案： 现在浏览器script标签支持 async 和 defer 属性. 应用这些属性当script被下载时，浏览器更安全而且可以并行下载（下载script并不阻断HTML解析）。 1.async标记的Script异步执行下载，并执行。这意味着script下载时并不阻塞HTML的解析，并且下载结束script马上执行。 2.defer标签的script顺序执行。这种方式也不会阻断浏览器解析HTML。 跟 async不同, defer scripts在整个文档里的script都被下载完才顺序执行。</p>
</blockquote>
<h2 id="51-JQuery一个对象可以同时绑定多个事件，这是如何实现的？"><a href="#51-JQuery一个对象可以同时绑定多个事件，这是如何实现的？" class="headerlink" title="51. JQuery一个对象可以同时绑定多个事件，这是如何实现的？"></a>51. JQuery一个对象可以同时绑定多个事件，这是如何实现的？</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//多个事件同一个函数：</span></span><br><span class="line">	$(<span class="string">&quot;div&quot;</span>).<span class="title function_">on</span>(<span class="string">&quot;click mouseover&quot;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;);</span><br><span class="line"><span class="comment">//多个事件不同函数</span></span><br><span class="line">	$(<span class="string">&quot;div&quot;</span>).<span class="title function_">on</span>(&#123;</span><br><span class="line">		<span class="attr">click</span>: <span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;,</span><br><span class="line">		<span class="attr">mouseover</span>: <span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line">	&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="52-什么是前端路由？前端路由的-实现原理"><a href="#52-什么是前端路由？前端路由的-实现原理" class="headerlink" title="52. 什么是前端路由？前端路由的 实现原理"></a>52. 什么是前端路由？前端路由的 实现原理</h2><blockquote>
<p><a href="https://link.juejin.cn/?target=http://www.voidcn.com/article/p-fowvpjan-dx.html">参考链接</a></p>
</blockquote>
<h2 id="53-检测浏览器版本版本有哪些方式？"><a href="#53-检测浏览器版本版本有哪些方式？" class="headerlink" title="53. 检测浏览器版本版本有哪些方式？"></a>53. 检测浏览器版本版本有哪些方式？</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">功能检测、userAgent特征检测</span><br><span class="line"></span><br><span class="line">比如：navigator.<span class="property">userAgent</span></span><br><span class="line"><span class="comment">//&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36</span></span><br><span class="line">  (<span class="variable constant_">KHTML</span>, like <span class="title class_">Gecko</span>) <span class="title class_">Chrome</span>/<span class="number">41.0</span><span class="number">.2272</span><span class="number">.101</span> <span class="title class_">Safari</span>/<span class="number">537.36</span><span class="string">&quot;</span></span><br></pre></td></tr></table></figure>

<h2 id="54-什么是Polyfill"><a href="#54-什么是Polyfill" class="headerlink" title="54. 什么是Polyfill?"></a>54. 什么是Polyfill?</h2><blockquote>
<p>polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载 JavaScript 代码或库，在不支持这些标准 API 的浏览器中模拟它们。 例如，geolocation（地理位置）polyfill 可以在 navigator 对象上添加全局的 geolocation 对象，还能添加 getCurrentPosition 函数以及“坐标”回调对象， 所有这些都是 W3C 地理位置 API 定义的对象和函数。因为 polyfill 模拟标准 API，所以能够以一种面向所有浏览器未来的方式针对这些 API 进行开发， 一旦对这些 API 的支持变成绝对大多数，则可以方便地去掉 polyfill，无需做任何额外工作。</p>
</blockquote>
<h2 id="55-做的项目中，有没有用过或自己实现一些-polyfill-方案（兼容性处理方案）？"><a href="#55-做的项目中，有没有用过或自己实现一些-polyfill-方案（兼容性处理方案）？" class="headerlink" title="55. 做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？"></a>55. 做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？</h2><blockquote>
<p>html5shiv、Geolocation、Placeholder</p>
</blockquote>
<h2 id="56-我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？"><a href="#56-我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？" class="headerlink" title="56. 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？"></a>56. 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？</h2><blockquote>
<p>按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -&gt; 本元素代码顺序事件 -&gt; 其他元素冒泡阶段事件</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// div-capture &gt; btn-bubble &gt; btn-capture &gt; div-bubble</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;button&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> div = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"></span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;bubble&#x27;</span>,<span class="string">&#x27;btn&#x27;</span>);</span><br><span class="line">&#125;,<span class="literal">false</span>);</span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;capture&#x27;</span>,<span class="string">&#x27;btn&#x27;</span>);</span><br><span class="line">&#125;,<span class="literal">true</span>);</span><br><span class="line"></span><br><span class="line">div.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;bubble&#x27;</span>,<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line">&#125;,<span class="literal">false</span>);</span><br><span class="line">div.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;capture&#x27;</span>,<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line">&#125;,<span class="literal">true</span>);</span><br></pre></td></tr></table></figure>

<h2 id="57-Webpack热更新实现原理"><a href="#57-Webpack热更新实现原理" class="headerlink" title="57. Webpack热更新实现原理?"></a>57. Webpack热更新实现原理?</h2><blockquote>
<ol>
<li>Webpack编译期，为需要热更新的 entry 注入热更新代码(EventSource通信)</li>
</ol>
</blockquote>
<ol>
<li>页面首次打开后，服务端与客户端通过 EventSource 建立通信渠道，把下一次的 hash 返回前端</li>
<li>客户端获取到hash，这个hash将作为下一次请求服务端 hot-update.js 和 hot-update.json的hash</li>
<li>修改页面代码后，Webpack 监听到文件修改后，开始编译，编译完成后，发送 build 消息给客户端</li>
<li>客户端获取到hash，成功后客户端构造hot-update.js script链接，然后插入主文档</li>
<li>hot-update.js 插入成功后，执行hotAPI 的 createRecord 和 reload方法，获取到 Vue 组件的 render方法，重新 render 组件， 继而实现 UI 无刷新更新。</li>
</ol>
<h2 id="58-函数节流和防抖"><a href="#58-函数节流和防抖" class="headerlink" title="58. 函数节流和防抖"></a>58. 函数节流和防抖</h2><blockquote>
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903535125987335">参考链接</a></p>
</blockquote>
<h2 id="59-页面重构怎么操作？"><a href="#59-页面重构怎么操作？" class="headerlink" title="59. 页面重构怎么操作？"></a>59. 页面重构怎么操作？</h2><blockquote>
<p>网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。 也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。</p>
</blockquote>
<p>对于传统的网站来说重构通常是：</p>
<p>表格(table)布局改为DIV+CSS 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的) 对于移动平台的优化 针对于SEO进行优化 深层次的网站重构应该考虑的方面</p>
<p>减少代码间的耦合 让代码保持弹性 严格按规范编写代码 设计可扩展的API 代替旧有的框架、语言(如VB) 增强用户体验 通常来说对于速度的优化也包含在重构中</p>
<p>压缩JS、CSS、image等前端资源(通常是由服务器来解决) 程序的性能优化(如数据读写) 采用CDN来加速资源加载 对于JS DOM的优化 HTTP服务器的文件缓存</p>
<h2 id="60-列举IE与其他浏览器不一样的特性"><a href="#60-列举IE与其他浏览器不一样的特性" class="headerlink" title="60. 列举IE与其他浏览器不一样的特性"></a>60. 列举IE与其他浏览器不一样的特性</h2><blockquote>
<p>事件不同之处：</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> 	触发事件的元素被认为是目标（target）。而在 <span class="variable constant_">IE</span> 中，目标包含在 event 对象的 srcElement 属性；</span><br><span class="line"></span><br><span class="line">获取字符代码、如果按键代表一个字符（shift、ctrl、alt除外），<span class="variable constant_">IE</span> 的 keyCode 会返回字符代码（<span class="title class_">Unicode</span>），<span class="variable constant_">DOM</span> 中按键的代码和字符是分离的，要获取字符代码，需要使用 charCode 属性；</span><br><span class="line"></span><br><span class="line">阻止某个事件的默认行为，<span class="variable constant_">IE</span> 中阻止某个事件的默认行为，必须将 returnValue 属性设置为 <span class="literal">false</span>，<span class="title class_">Mozilla</span> 中，需要调用 <span class="title function_">preventDefault</span>() 方法；</span><br><span class="line"></span><br><span class="line">停止事件冒泡，<span class="variable constant_">IE</span> 中阻止事件进一步冒泡，需要设置 cancelBubble 为 <span class="literal">true</span>，<span class="title class_">Mozzilla</span> 中，需要调用 <span class="title function_">stopPropagation</span>()；</span><br></pre></td></tr></table></figure>

<h2 id="61-对Node的优点和缺点提出了自己的看法？"><a href="#61-对Node的优点和缺点提出了自己的看法？" class="headerlink" title="61. 对Node的优点和缺点提出了自己的看法？"></a>61. 对Node的优点和缺点提出了自己的看法？</h2><blockquote>
<p>*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求， 因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。 此外，与Node代理服务器交互的客户端代码是由javascript语言编写的， 因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。</p>
</blockquote>
<p>*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变， 而且缺少足够多的第三方库支持。看起来，就像是Ruby&#x2F;Rails当年的样子。</p>
<h2 id="62-你有用过哪些前端性能优化的方法？"><a href="#62-你有用过哪些前端性能优化的方法？" class="headerlink" title="62. 你有用过哪些前端性能优化的方法？"></a>62. 你有用过哪些前端性能优化的方法？</h2><blockquote>
<p>（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">（<span class="number">2</span>） 前端模板 <span class="variable constant_">JS</span>+数据，减少由于<span class="variable constant_">HTML</span>标签导致的带宽浪费，前端用变量保存<span class="variable constant_">AJAX</span>请求结果，每次操作本地变量，不用请求，减少请求次数</span><br><span class="line"></span><br><span class="line">（<span class="number">3</span>） 用innerHTML代替<span class="variable constant_">DOM</span>操作，减少<span class="variable constant_">DOM</span>操作次数，优化javascript性能。</span><br><span class="line"></span><br><span class="line">（<span class="number">4</span>） 当需要设置的样式很多时设置className而不是直接操作style。</span><br><span class="line"></span><br><span class="line">（<span class="number">5</span>） 少用全局变量、缓存<span class="variable constant_">DOM</span>节点查找的结果。减少<span class="variable constant_">IO</span>读取操作。</span><br><span class="line"></span><br><span class="line">（<span class="number">6</span>） 避免使用<span class="variable constant_">CSS</span> <span class="title class_">Expression</span>（css表达式)又称<span class="title class_">Dynamic</span> <span class="title function_">properties</span>(动态属性)。</span><br><span class="line"></span><br><span class="line">（<span class="number">7</span>） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。</span><br><span class="line"></span><br><span class="line">（<span class="number">8</span>） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。</span><br><span class="line">对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘<span class="variable constant_">IO</span>。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘<span class="variable constant_">IO</span>指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。</span><br></pre></td></tr></table></figure>

<h2 id="63-http"><a href="#63-http" class="headerlink" title="63. http"></a>63. http</h2><blockquote>
<p>1**(信息类)：表示接收到请求并且继续处理 100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">2</span>**(响应成功)：表示动作被成功接收、理解和接受</span><br><span class="line"><span class="number">200</span>——表明该请求被成功地完成，所请求的资源发送回客户端</span><br><span class="line"><span class="number">201</span>——提示知道新文件的<span class="variable constant_">URL</span></span><br><span class="line"><span class="number">202</span>——接受和处理、但处理未完成</span><br><span class="line"><span class="number">203</span>——返回信息不确定或不完整</span><br><span class="line"><span class="number">204</span>——请求收到，但返回信息为空</span><br><span class="line"><span class="number">205</span>——服务器完成了请求，用户代理必须复位当前已经浏览过的文件</span><br><span class="line"><span class="number">206</span>——服务器已经完成了部分用户的<span class="variable constant_">GET</span>请求</span><br><span class="line"></span><br><span class="line"><span class="number">3</span>**(重定向类)：为了完成指定的动作，必须接受进一步处理</span><br><span class="line"><span class="number">300</span>——请求的资源可在多处得到</span><br><span class="line"><span class="number">301</span>——本网页被永久性转移到另一个<span class="variable constant_">URL</span></span><br><span class="line"><span class="number">302</span>——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始<span class="variable constant_">URL</span>地址，重定向，新的<span class="variable constant_">URL</span>会在response中的<span class="title class_">Location</span>中返回，浏览器将会使用新的<span class="variable constant_">URL</span>发出新的<span class="title class_">Request</span>。</span><br><span class="line"><span class="number">303</span>——建议客户访问其他<span class="variable constant_">URL</span>或访问方式</span><br><span class="line"><span class="number">304</span>——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用</span><br><span class="line"><span class="number">305</span>——请求的资源必须从服务器指定的地址得到</span><br><span class="line"><span class="number">306</span>——前一版本<span class="variable constant_">HTTP</span>中使用的代码，现行版本中不再使用</span><br><span class="line"><span class="number">307</span>——申明请求的资源临时性删除</span><br><span class="line"></span><br><span class="line"><span class="number">4</span>**(客户端错误类)：请求包含错误语法或不能正确执行</span><br><span class="line"><span class="number">400</span>——客户端请求有语法错误，不能被服务器所理解</span><br><span class="line"><span class="number">401</span>——请求未经授权，这个状态代码必须和<span class="variable constant_">WWW</span>-<span class="title class_">Authenticate</span>报头域一起使用</span><br><span class="line"><span class="variable constant_">HTTP</span> <span class="number">401.1</span> - 未授权：登录失败</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">401.2</span> - 未授权：服务器配置问题导致登录失败</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">401.3</span> - <span class="variable constant_">ACL</span> 禁止访问资源</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">401.4</span> - 未授权：授权被筛选器拒绝</span><br><span class="line"><span class="variable constant_">HTTP</span> <span class="number">401.5</span> - 未授权：<span class="variable constant_">ISAPI</span> 或 <span class="variable constant_">CGI</span> 授权失败</span><br><span class="line"><span class="number">402</span>——保留有效<span class="title class_">ChargeTo</span>头响应</span><br><span class="line"><span class="number">403</span>——禁止访问，服务器收到请求，但是拒绝提供服务</span><br><span class="line"><span class="variable constant_">HTTP</span> <span class="number">403.1</span> 禁止访问：禁止可执行访问</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.2</span> - 禁止访问：禁止读访问</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.3</span> - 禁止访问：禁止写访问</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.4</span> - 禁止访问：要求 <span class="variable constant_">SSL</span></span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.5</span> - 禁止访问：要求 <span class="variable constant_">SSL</span> <span class="number">128</span></span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.6</span> - 禁止访问：<span class="variable constant_">IP</span> 地址被拒绝</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.7</span> - 禁止访问：要求客户证书</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.8</span> - 禁止访问：禁止站点访问</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.9</span> - 禁止访问：连接的用户过多</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.10</span> - 禁止访问：配置无效</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.11</span> - 禁止访问：密码更改</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.12</span> - 禁止访问：映射器拒绝访问</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.13</span> - 禁止访问：客户证书已被吊销</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.15</span> - 禁止访问：客户访问许可过多</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">403.16</span> - 禁止访问：客户证书不可信或者无效</span><br><span class="line"><span class="variable constant_">HTTP</span> <span class="number">403.17</span> - 禁止访问：客户证书已经到期或者尚未生效</span><br><span class="line"><span class="number">404</span>——一个<span class="number">404</span>错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的<span class="variable constant_">URL</span></span><br><span class="line"><span class="number">405</span>——用户在<span class="title class_">Request</span>-<span class="title class_">Line</span>字段定义的方法不允许</span><br><span class="line"><span class="number">406</span>——根据用户发送的<span class="title class_">Accept</span>拖，请求资源不可访问</span><br><span class="line"><span class="number">407</span>——类似<span class="number">401</span>，用户必须首先在代理服务器上得到授权</span><br><span class="line"><span class="number">408</span>——客户端没有在用户指定的饿时间内完成请求</span><br><span class="line"><span class="number">409</span>——对当前资源状态，请求不能完成</span><br><span class="line"><span class="number">410</span>——服务器上不再有此资源且无进一步的参考地址</span><br><span class="line"><span class="number">411</span>——服务器拒绝用户定义的<span class="title class_">Content</span>-<span class="title class_">Length</span>属性请求</span><br><span class="line"><span class="number">412</span>——一个或多个请求头字段在当前请求中错误</span><br><span class="line"><span class="number">413</span>——请求的资源大于服务器允许的大小</span><br><span class="line"><span class="number">414</span>——请求的资源<span class="variable constant_">URL</span>长于服务器允许的长度</span><br><span class="line"><span class="number">415</span>——请求资源不支持请求项目格式</span><br><span class="line"><span class="number">416</span>——请求中包含<span class="title class_">Range</span>请求头字段，在当前请求资源范围内没有range指示值，请求也不包含<span class="title class_">If</span>-<span class="title class_">Range</span>请求头字段</span><br><span class="line"><span class="number">417</span>——服务器不满足请求<span class="title class_">Expect</span>头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。</span><br><span class="line"></span><br><span class="line"><span class="number">5</span>**(服务端错误类)：服务器不能正确执行一个正确的请求</span><br><span class="line"><span class="variable constant_">HTTP</span> <span class="number">500</span> - 服务器遇到错误，无法完成请求</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">500.100</span> - 内部服务器错误 - <span class="variable constant_">ASP</span> 错误</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">500</span>-<span class="number">11</span> 服务器关闭</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">500</span>-<span class="number">12</span> 应用程序重新启动</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">500</span>-<span class="number">13</span> - 服务器太忙</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">500</span>-<span class="number">14</span> - 应用程序无效</span><br><span class="line">&amp;emsp;&amp;emsp;<span class="variable constant_">HTTP</span> <span class="number">500</span>-<span class="number">15</span> - 不允许请求 <span class="variable language_">global</span>.<span class="property">asa</span></span><br><span class="line">&amp;emsp;&amp;emsp;<span class="title class_">Error</span> <span class="number">501</span> - 未实现</span><br><span class="line"><span class="variable constant_">HTTP</span> <span class="number">502</span> - 网关错误</span><br><span class="line"><span class="variable constant_">HTTP</span> <span class="number">503</span>：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常</span><br></pre></td></tr></table></figure>

<h2 id="64-一个页面从输入-URL-到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）"><a href="#64-一个页面从输入-URL-到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）" class="headerlink" title="64. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）"></a>64. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）</h2><blockquote>
<p>而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、 到浏览器流式解析、CSS规则构建、layout、paint、onload&#x2F;domready、JS执行、JS API绑定等等；</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">详细版：</span><br><span class="line"><span class="number">1</span>、浏览器会开启一个线程来处理这个请求，对 <span class="variable constant_">URL</span> 分析判断如果是 http 协议就按照 <span class="title class_">Web</span> 方式来处理;</span><br><span class="line"><span class="number">2</span>、调用浏览器内核中的对应方法，比如 <span class="title class_">WebView</span> 中的 loadUrl 方法;</span><br><span class="line">  <span class="number">3</span>、通过<span class="variable constant_">DNS</span>解析获取网址的<span class="variable constant_">IP</span>地址，设置 <span class="variable constant_">UA</span> 等信息发出第二个<span class="variable constant_">GET</span>请求;</span><br><span class="line"><span class="number">4</span>、进行<span class="variable constant_">HTTP</span>协议会话，客户端发送报头(请求报头);</span><br><span class="line">  <span class="number">5</span>、进入到web服务器上的 <span class="title class_">Web</span> <span class="title class_">Server</span>，如 <span class="title class_">Apache</span>、<span class="title class_">Tomcat</span>、<span class="title class_">Node</span>.<span class="property">JS</span> 等服务器;</span><br><span class="line">  <span class="number">6</span>、进入部署好的后端应用，如 <span class="variable constant_">PHP</span>、<span class="title class_">Java</span>、<span class="title class_">JavaScript</span>、<span class="title class_">Python</span> 等，找到对应的请求处理;</span><br><span class="line"><span class="number">7</span>、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回<span class="number">304</span>;</span><br><span class="line">  <span class="number">8</span>、浏览器开始下载html文档(响应报头，状态码<span class="number">200</span>)，同时使用缓存;</span><br><span class="line">  <span class="number">9</span>、文档树建立，根据标记请求所需指定<span class="variable constant_">MIME</span>类型的文件（比如css、js）,同时设置了cookie;</span><br><span class="line">  <span class="number">10</span>、页面开始渲染<span class="variable constant_">DOM</span>，<span class="variable constant_">JS</span>根据<span class="variable constant_">DOM</span> <span class="variable constant_">API</span>操作<span class="variable constant_">DOM</span>,执行事件绑定等，页面显示完成。</span><br></pre></td></tr></table></figure>

<h2 id="65-前端学习资源"><a href="#65-前端学习资源" class="headerlink" title="65. 前端学习资源"></a>65. 前端学习资源</h2><blockquote>
<p><a href="https://link.juejin.cn/?target=http://bonsaiden.github.io/JavaScript-Garden/zh/">js秘密花园</a> <a href="https://link.juejin.cn/?target=http://docs.huihoo.com/jquery/jquery-fundamentals/zh-cn/index.html">jquery原理解析</a> <a href="https://link.juejin.cn/?target=http://css.doyoe.com/">css3</a> <a href="https://link.juejin.cn/?target=http://javascript.ruanyifeng.com/bom/cors.html">js标准</a></p>
</blockquote>
<h2 id="66-邮箱验证"><a href="#66-邮箱验证" class="headerlink" title="66. 邮箱验证"></a>66. 邮箱验证</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]&#123;2,8&#125;)$/;</span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903574778937358">参考链接</a></p>
<h2 id="67-ajax实现原理及方法使用"><a href="#67-ajax实现原理及方法使用" class="headerlink" title="67. ajax实现原理及方法使用"></a>67. ajax实现原理及方法使用</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">readyState属性有五个状态值。</span><br><span class="line"></span><br><span class="line">0：是uninitialized，未初始化。已经创建了XMLHttpRequest对象但是未初始化。</span><br><span class="line">1：是loading.已经开始准备好要发送了。</span><br><span class="line">2：已经发送，但是还没有收到响应。</span><br><span class="line">3：正在接受响应，但是还不完整。</span><br><span class="line">4：接受响应完毕。</span><br><span class="line">responseText：服务器返回的响应文本。只有当readyState&gt;=3的时候才有值，根据readyState的状态值，可以知道，当readyState=3，返回的响应文本不完整，只有readyState=4，完全返回，才能接受全部的响应文本。</span><br><span class="line"></span><br><span class="line">responseXML：response  as Dom Document object。响应信息是xml，可以解析为Dom对象。</span><br><span class="line">status：服务器的Http状态码，若是200，则表示OK，404，表示为未找到。</span><br><span class="line">statusText：服务器http状态码的文本。比如OK，Not Found。</span><br></pre></td></tr></table></figure>

<p><a href="https://link.juejin.cn/?target=https://blog.csdn.net/fuxiaohui/article/details/72725500">参考链接</a></p>
<h2 id="68-js实现继承"><a href="#68-js实现继承" class="headerlink" title="68. js实现继承"></a>68. js实现继承</h2><p><a href="https://link.juejin.cn/?target=https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Inheritance">参考链接</a></p>
<h2 id="69-用generator实现es7的async"><a href="#69-用generator实现es7的async" class="headerlink" title="69. 用generator实现es7的async"></a>69. 用generator实现es7的async</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">```</span><br><span class="line"></span><br><span class="line">## 70. 闭包使用的优缺点</span><br><span class="line"></span><br><span class="line">&gt; 优点：1.保护函数内部变量的安全，加强了封装性 2.在内存中维持一个变量 3.设计私有方法和变量 4.可以读取函数内部的变量 缺点：1.导致内存泄漏，使用不当会造成额外的内存占用 2.可以改变父函数的变量，所以使用时要谨慎</span><br><span class="line"></span><br><span class="line">## 71. canvas和svg区别</span><br><span class="line"></span><br><span class="line">&gt; 1.从图像类别区分，Canvas是基于像素的位图，而SVG却是基于矢量图形。可以简单的把两者的区别看成photoshop与illustrator的区别。 2.从结构上说，Canvas没有图层的概念，所有的修改整个画布都要重新渲染，而SVG则可以对单独的标签进行修改。 3.从操作对象上说，Canvas是基于HTML canvas标签，通过宿主提供的Javascript API对整个画布进行操作的，而SVG则是基于XML元素的。 4.从功能上讲，SVG发布日期较早，所以功能相对Canvas比较完善。 5.关于动画，Canvas更适合做基于位图的动画，而SVG则适合图表的展示。 6.从搜索引擎角度分析，由于svg是有大量标签组成，所以可以通过给标签添加属性，便于爬虫搜索</span><br><span class="line"></span><br><span class="line">## 72. 开启硬件加速</span><br><span class="line"></span><br><span class="line">```js</span><br><span class="line">//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。</span><br><span class="line">.css &#123;</span><br><span class="line">    -webkit-transform: translate3d(0,0,0);</span><br><span class="line">    -moz-transform: translate3d(0,0,0);</span><br><span class="line">    -ms-transform: translate3d(0,0,0);</span><br><span class="line">    transform: translate3d(0,0,0);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="73-button注意事项"><a href="#73-button注意事项" class="headerlink" title="73. button注意事项"></a>73. button注意事项</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button&gt;&lt;/button&gt;元素一定要写上type属性不然会默认提交表单，出现想不到的bug</span><br></pre></td></tr></table></figure>

<h2 id="74-移动端html标签几个体验优化"><a href="#74-移动端html标签几个体验优化" class="headerlink" title="74. 移动端html标签几个体验优化"></a>74. 移动端html标签几个体验优化</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">html,body&#123;</span><br><span class="line"></span><br><span class="line"><span class="attr">overflow</span>: hidden;<span class="comment">/*手机上写overflow-x:hidden;会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/</span></span><br><span class="line"></span><br><span class="line">-webkit-overflow-<span class="attr">scrolling</span>:touch;<span class="comment">/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/</span></span><br><span class="line"></span><br><span class="line"><span class="attr">position</span>:realtive;<span class="comment">/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="75-手机上的多行省略"><a href="#75-手机上的多行省略" class="headerlink" title="75.手机上的多行省略"></a>75.手机上的多行省略</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.<span class="property">overflow</span>-hidden&#123;</span><br><span class="line">    <span class="attr">display</span>: box !important;</span><br><span class="line">    <span class="attr">display</span>: -webkit-box !important;</span><br><span class="line">    <span class="attr">overflow</span>: hidden;</span><br><span class="line">    text-<span class="attr">overflow</span>: ellipsis;</span><br><span class="line">    -webkit-box-<span class="attr">orient</span>: vertical;</span><br><span class="line">    -webkit-line-<span class="attr">clamp</span>: <span class="number">4</span>;<span class="comment">/*第几行出现省略号*/</span></span><br><span class="line">    <span class="comment">/*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="76-长时间按住页面闪退"><a href="#76-长时间按住页面闪退" class="headerlink" title="76. 长时间按住页面闪退"></a>76. 长时间按住页面闪退</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.<span class="property">element</span> &#123;</span><br><span class="line">    -webkit-touch-<span class="attr">callout</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="77-改变输入框内提示文字颜色"><a href="#77-改变输入框内提示文字颜色" class="headerlink" title="77. 改变输入框内提示文字颜色"></a>77. 改变输入框内提示文字颜色</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">::-webkit-input-placeholder &#123; <span class="comment">/* WebKit browsers */</span></span><br><span class="line">    <span class="attr">color</span>: #<span class="number">999</span>; &#125;</span><br><span class="line">:-moz-placeholder &#123; <span class="comment">/* Mozilla Firefox 4 to 18 */</span></span><br><span class="line">    <span class="attr">color</span>: #<span class="number">999</span>; &#125;</span><br><span class="line">::-moz-placeholder &#123; <span class="comment">/* Mozilla Firefox 19+ */</span></span><br><span class="line">    <span class="attr">color</span>: #<span class="number">999</span>; &#125;</span><br><span class="line">:-ms-input-placeholder &#123; <span class="comment">/* Internet Explorer 10+ */</span></span><br><span class="line">    <span class="attr">color</span>: #<span class="number">999</span>; &#125;</span><br><span class="line"><span class="attr">input</span>:<span class="attr">focus</span>::-webkit-input-placeholder&#123; <span class="attr">color</span>:#<span class="number">999</span>; &#125;</span><br></pre></td></tr></table></figure>

<h2 id="78-自动播放音乐"><a href="#78-自动播放音乐" class="headerlink" title="78. 自动播放音乐"></a>78. 自动播放音乐</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//JS绑定自动播放（操作window时，播放音乐）</span></span><br><span class="line">$(<span class="variable language_">window</span>).<span class="title function_">one</span>(<span class="string">&#x27;touchstart&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    music.<span class="title function_">play</span>();</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//微信下兼容处理</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;WeixinJSBridgeReady&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    music.<span class="title function_">play</span>();</span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure>

<h2 id="79-消除transtration闪屏"><a href="#79-消除transtration闪屏" class="headerlink" title="79.消除transtration闪屏"></a>79.消除transtration闪屏</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">消除<span class="attribute">transition</span>闪屏</span><br><span class="line"><span class="selector-class">.css</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</span><br><span class="line">    -webkit-<span class="attribute">backface-visibility</span>: hidden;</span><br><span class="line">    -webkit-<span class="attribute">perspective</span>: <span class="number">1000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h4><p>文中如有一些不足，欢迎指正。笔者1天后将推出开源的CMS系统，技术架构：</p>
<ul>
<li>后台Node+Koa+redis+JsonSchema</li>
<li>管理后台界面 vue-cli3 + vue + ts + vuex + antd-vue + axios</li>
<li>客户端前台 react + antd + react-hooks + axios</li>
</ul>
<p>该系统的设计思想，架构和实现过程，欢迎在笔者有关全栈CMS的文章中学习交流。</p>
<p>欢迎大家相互学习交流，一起探索前端的边界。</p>
<hr>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">Author: </span><span class="post-copyright-info"><a href="https://szhihao.gitee.io">孙志豪</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">Link: </span><span class="post-copyright-info"><a href="https://szhihao.gitee.io/2022/10/11/03-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%AD79%E6%9D%A1%E4%B8%8D%E5%8F%AF%E5%BF%BD%E8%A7%86%E7%9A%84%E7%9F%A5%E8%AF%86%E7%82%B9%E6%B1%87%E6%80%BB/">https://szhihao.gitee.io/2022/10/11/03-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%AD79%E6%9D%A1%E4%B8%8D%E5%8F%AF%E5%BF%BD%E8%A7%86%E7%9A%84%E7%9F%A5%E8%AF%86%E7%82%B9%E6%B1%87%E6%80%BB/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">Copyright Notice: </span><span class="post-copyright-info">All articles in this blog are licensed under <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> unless stating additionally.</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="/img/%E5%A4%A9%E7%A9%BA.jpeg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2022/10/11/10-%E5%89%8D%E7%AB%AFHTML%E7%AF%87%E7%AB%A0/%E6%8E%98%E9%87%91HTML%E5%9F%BA%E7%A1%80%E7%AF%87/"><img class="prev-cover" src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">Previous Post</div><div class="prev_info">前端HTML篇章</div></div></a></div><div class="next-post pull-right"><a href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/%E5%BE%92%E6%89%8B%E5%AE%9E%E7%8E%B024+%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%EF%BC%8C%E8%B0%81%E8%AF%B4%E4%BD%A0%E5%8F%AA%E6%98%AF%E2%80%9C%E4%BC%9A%E7%94%A8%E2%80%9D%E6%95%B0%E7%BB%84%EF%BC%9F/"><img class="next-cover" src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">Next Post</div><div class="next_info">徒手实现24+数组方法，谁说你只是“会用”数组？</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="/img/%E5%A4%B4%E5%83%8F.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">孙志豪</div><div class="author-info__description">吾日三省吾身：为人谋而不忠乎？与朋友交而不信乎？传不习乎？</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">44</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">15</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://gitee.com/szhihao/szhihao"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://gitee.com/szhihao/szhihao" target="_blank" title="Gitee"><i class="fab fa-github"></i></a><a class="social-icon" href="https://blog.csdn.net/qq_54753561" target="_blank" title="CSDN"><i class="fa fa-book-open"></i></a><a class="social-icon" href="mailto:zhihaomail@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>Announcement</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>Catalog</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%AD79%E6%9D%A1%E4%B8%8D%E5%8F%AF%E5%BF%BD%E8%A7%86%E7%9A%84%E7%9F%A5%E8%AF%86%E7%82%B9%E6%B1%87%E6%80%BB"><span class="toc-number">1.</span> <span class="toc-text">前端开发中79条不可忽视的知识点汇总</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-css%E7%A6%81%E7%94%A8%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.1.</span> <span class="toc-text">1.css禁用鼠标事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-get-x2F-post%E7%9A%84%E7%90%86%E8%A7%A3%E5%92%8C%E4%BB%96%E4%BB%AC%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.2.</span> <span class="toc-text">2.get&#x2F;post的理解和他们之间的区别</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#http"><span class="toc-number">1.2.1.</span> <span class="toc-text">http</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#http%E6%96%B9%E6%B3%95%EF%BC%9A"><span class="toc-number">1.2.2.</span> <span class="toc-text">http方法：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#GET%E5%92%8CPOST%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.2.3.</span> <span class="toc-text">GET和POST的区别</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%AE%9E%E7%8E%B0%E6%9D%A1%E7%BA%B9%E7%BD%91%E6%A0%BC%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">1.3.</span> <span class="toc-text">3.实现条纹网格的方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-js%E6%B1%82%E5%B9%B3%E9%9D%A2%E4%B8%A4%E7%82%B9%E4%B9%8B%E9%97%B4%E7%9A%84%E8%B7%9D%E7%A6%BB"><span class="toc-number">1.4.</span> <span class="toc-text">4.js求平面两点之间的距离</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-css%E7%A6%81%E6%AD%A2%E7%94%A8%E6%88%B7%E9%80%89%E6%8B%A9"><span class="toc-number">1.5.</span> <span class="toc-text">5.css禁止用户选择</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="toc-number">1.6.</span> <span class="toc-text">6.数组去重</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E4%BB%80%E4%B9%88%E6%98%AFCDN%E5%92%8CCDN%E7%9A%84%E5%A5%BD%E5%A4%84"><span class="toc-number">1.7.</span> <span class="toc-text">7.什么是CDN和CDN的好处</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80%E5%92%8C%E5%8F%8C%E9%A3%9E%E7%BF%BC%E5%B8%83%E5%B1%80"><span class="toc-number">1.8.</span> <span class="toc-text">8.圣杯布局和双飞翼布局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%8C%B9%E9%85%8D%E6%89%8B%E6%9C%BA%E5%8F%B7"><span class="toc-number">1.9.</span> <span class="toc-text">9.正则表达式匹配手机号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E5%A6%82%E4%BD%95%E6%8F%90%E9%AB%98%E9%A6%96%E9%A2%91%E5%8A%A0%E8%BD%BD%E9%80%9F%E5%BA%A6"><span class="toc-number">1.10.</span> <span class="toc-text">10.如何提高首频加载速度</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E6%B5%8F%E8%A7%88%E5%99%A8%E5%86%85%E6%A0%B8-%E6%B8%B2%E6%9F%93%E5%BC%95%E6%93%8E"><span class="toc-number">1.11.</span> <span class="toc-text">11.浏览器内核(渲染引擎)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E8%BF%87%E7%A8%8B%E5%8F%8A%E4%BC%98%E5%8C%96%E5%BB%BA%E8%AE%AE"><span class="toc-number">1.12.</span> <span class="toc-text">12.浏览器渲染过程及优化建议</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E9%A1%B5%E9%9D%A2%E5%AF%BC%E5%85%A5%E6%A0%B7%E5%BC%8F%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8link%E5%92%8C-import%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-number">1.13.</span> <span class="toc-text">13. 页面导入样式时，使用link和@import有什么区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E7%AE%80%E8%BF%B0%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%AF%B9HTML%E8%AF%AD%E4%B9%89%E5%8C%96%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F"><span class="toc-number">1.14.</span> <span class="toc-text">14. 简述一下你对HTML语义化的理解？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E8%AF%B7%E6%8F%8F%E8%BF%B0%E4%B8%80%E4%B8%8B-cookies%EF%BC%8CsessionStorage-%E5%92%8C-localStorage-%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-number">1.15.</span> <span class="toc-text">15. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-iframe%E6%9C%89%E9%82%A3%E4%BA%9B%E7%BC%BA%E7%82%B9%EF%BC%9F"><span class="toc-number">1.16.</span> <span class="toc-text">16. iframe有那些缺点？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-vue%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%8F%8A%E4%BD%9C%E7%94%A8%EF%BC%9F"><span class="toc-number">1.17.</span> <span class="toc-text">17. vue父子组件生命周期的顺序及作用？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E7%BD%91%E9%A1%B5%E9%AA%8C%E8%AF%81%E7%A0%81%E6%98%AF%E5%B9%B2%E5%98%9B%E7%9A%84%EF%BC%8C%E6%98%AF%E4%B8%BA%E4%BA%86%E8%A7%A3%E5%86%B3%E4%BB%80%E4%B9%88%E5%AE%89%E5%85%A8%E9%97%AE%E9%A2%98%EF%BC%9F"><span class="toc-number">1.18.</span> <span class="toc-text">18. 网页验证码是干嘛的，是为了解决什么安全问题？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8B%E6%A0%87%E5%87%86%E7%9A%84CSS%E7%9A%84%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%EF%BC%9F%E4%BD%8E%E7%89%88%E6%9C%ACIE%E7%9A%84%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E6%9C%89%E4%BB%80%E4%B9%88%E4%B8%8D%E5%90%8C%E7%9A%84%EF%BC%9F"><span class="toc-number">1.19.</span> <span class="toc-text">19. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-position%E7%9A%84%E5%80%BCrelative%E5%92%8Cabsolute%E5%AE%9A%E4%BD%8D%E5%8E%9F%E7%82%B9%E6%98%AF%EF%BC%9F"><span class="toc-number">1.20.</span> <span class="toc-text">20. position的值relative和absolute定位原点是？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-%E7%BB%8F%E5%B8%B8%E9%81%87%E5%88%B0%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%8E%9F%E5%9B%A0%EF%BC%8C%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%8C%E5%B8%B8%E7%94%A8hack%E7%9A%84%E6%8A%80%E5%B7%A7-%EF%BC%9F"><span class="toc-number">1.21.</span> <span class="toc-text">21. 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-CSS%E4%BC%98%E5%8C%96%E3%80%81%E6%8F%90%E9%AB%98%E6%80%A7%E8%83%BD%E7%9A%84%E6%96%B9%E6%B3%95%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-number">1.22.</span> <span class="toc-text">22. CSS优化、提高性能的方法有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-%E5%A6%82%E4%BD%95%E4%BF%AE%E6%94%B9chrome%E8%AE%B0%E4%BD%8F%E5%AF%86%E7%A0%81%E5%90%8E%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85%E8%A1%A8%E5%8D%95%E7%9A%84%E9%BB%84%E8%89%B2%E8%83%8C%E6%99%AF-%EF%BC%9F"><span class="toc-number">1.23.</span> <span class="toc-text">23. 如何修改chrome记住密码后自动填充表单的黄色背景 ？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-%E8%AE%A9%E9%A1%B5%E9%9D%A2%E9%87%8C%E7%9A%84%E5%AD%97%E4%BD%93%E5%8F%98%E6%B8%85%E6%99%B0%EF%BC%8C%E5%8F%98%E7%BB%86%E7%94%A8CSS%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%9F"><span class="toc-number">1.24.</span> <span class="toc-text">24. 让页面里的字体变清晰，变细用CSS怎么做？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-%E8%AE%A9overflow-scroll%E5%B9%B3%E6%BB%91%E6%BB%9A%E5%8A%A8%EF%BC%9F"><span class="toc-number">1.25.</span> <span class="toc-text">25. 让overflow:scroll平滑滚动？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-%E5%A6%82%E4%BD%95%E5%B0%86%E6%B5%AE%E7%82%B9%E6%95%B0%E7%82%B9%E5%B7%A6%E8%BE%B9%E7%9A%84%E6%95%B0%E6%AF%8F%E4%B8%89%E4%BD%8D%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E9%80%97%E5%8F%B7%EF%BC%8C%E5%A6%8212000000-11%E8%BD%AC%E5%8C%96%E4%B8%BA%E3%80%8E12-000-000-11%E3%80%8F"><span class="toc-number">1.26.</span> <span class="toc-text">26. 如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为『12,000,000.11』?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-Javascript%E4%BD%9C%E7%94%A8%E9%93%BE%E5%9F%9F"><span class="toc-number">1.27.</span> <span class="toc-text">27. Javascript作用链域?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E8%B0%88%E8%B0%88This%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%90%86%E8%A7%A3%E3%80%82"><span class="toc-number">1.28.</span> <span class="toc-text">28. 谈谈This对象的理解。</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-eval%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%EF%BC%9F"><span class="toc-number">1.29.</span> <span class="toc-text">29. eval是做什么的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-%E4%BB%80%E4%B9%88%E6%98%AFwindow%E5%AF%B9%E8%B1%A1-%E4%BB%80%E4%B9%88%E6%98%AFdocument%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.30.</span> <span class="toc-text">30. 什么是window对象? 什么是document对象?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-%E2%80%9C1%E2%80%9D-%E2%80%9C2%E2%80%9D-%E2%80%9C3%E2%80%9D-map-parseInt-%E7%AD%94%E6%A1%88%E6%98%AF%E5%A4%9A%E5%B0%91%EF%BC%9F"><span class="toc-number">1.31.</span> <span class="toc-text">31. [“1”, “2”, “3”].map(parseInt) 答案是多少？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-%E4%BB%80%E4%B9%88%E6%98%AF%E9%97%AD%E5%8C%85%EF%BC%88closure%EF%BC%89%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8%E5%AE%83%EF%BC%9F"><span class="toc-number">1.32.</span> <span class="toc-text">32. 什么是闭包（closure），为什么要用它？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-javascript-%E4%BB%A3%E7%A0%81%E4%B8%AD%E7%9A%84%E2%80%9Duse-strict%E2%80%9D-%E6%98%AF%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D-%E4%BD%BF%E7%94%A8%E5%AE%83%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-number">1.33.</span> <span class="toc-text">33. javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34-%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E5%B1%9E%E4%BA%8E%E6%9F%90%E4%B8%AA%E7%B1%BB%EF%BC%9F"><span class="toc-number">1.34.</span> <span class="toc-text">34. 如何判断一个对象是否属于某个类？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35-new%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="toc-number">1.35.</span> <span class="toc-text">35. new一个对象的过程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#36-Ajax-%E8%A7%A3%E5%86%B3%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E9%97%AE%E9%A2%98"><span class="toc-number">1.36.</span> <span class="toc-text">36. Ajax 解决浏览器缓存问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#37-%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98"><span class="toc-number">1.37.</span> <span class="toc-text">37. 如何解决跨域问题?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#38-%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91%E6%80%8E%E4%B9%88%E5%81%9A"><span class="toc-number">1.38.</span> <span class="toc-text">38. 模块化开发怎么做</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#39-AMD%EF%BC%88Modules-x2F-Asynchronous-Definition%EF%BC%89%E3%80%81CMD%EF%BC%88Common-Module-Definition%EF%BC%89%E8%A7%84%E8%8C%83%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-number">1.39.</span> <span class="toc-text">39. AMD（Modules&#x2F;Asynchronous-Definition）、CMD（Common Module Definition）规范区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#40-requireJS%E7%9A%84%E6%A0%B8%E5%BF%83%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%EF%BC%88%E5%A6%82%E4%BD%95%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E7%9A%84%EF%BC%9F%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D%E5%A4%9A%E6%AC%A1%E5%8A%A0%E8%BD%BD%E7%9A%84%EF%BC%9F%E5%A6%82%E4%BD%95-%E7%BC%93%E5%AD%98%E7%9A%84%EF%BC%9F%EF%BC%89"><span class="toc-number">1.40.</span> <span class="toc-text">40. requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#41-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%E5%8A%A0%E8%BD%BD%E5%99%A8"><span class="toc-number">1.41.</span> <span class="toc-text">41. 如何实现一个模块加载器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#42-%E5%88%97%E4%B8%BE%E5%87%A0%E6%9D%A1-JavaScript-%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83"><span class="toc-number">1.42.</span> <span class="toc-text">42. 列举几条 JavaScript 的基本代码规范</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#43-DOM%E6%93%8D%E4%BD%9C%E2%80%94%E2%80%94%E6%80%8E%E6%A0%B7%E6%B7%BB%E5%8A%A0%E3%80%81%E7%A7%BB%E9%99%A4%E3%80%81%E7%A7%BB%E5%8A%A8%E3%80%81%E5%A4%8D%E5%88%B6%E3%80%81%E5%88%9B%E5%BB%BA%E5%92%8C%E6%9F%A5%E6%89%BE%E8%8A%82%E7%82%B9"><span class="toc-number">1.43.</span> <span class="toc-text">43. DOM操作——怎样添加、移除、移动、复制、创建和查找节点?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#44-jquery%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86"><span class="toc-number">1.44.</span> <span class="toc-text">44. jquery实现原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#45-jquery%E4%B8%AD%E5%A6%82%E4%BD%95%E5%B0%86%E6%95%B0%E7%BB%84%E8%BD%AC%E5%8C%96%E4%B8%BAjson%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E7%84%B6%E5%90%8E%E5%86%8D%E8%BD%AC%E5%8C%96%E5%9B%9E%E6%9D%A5%EF%BC%9F"><span class="toc-number">1.45.</span> <span class="toc-text">45. jquery中如何将数组转化为json字符串，然后再转化回来？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#46-jquery%E7%9A%84-extend%E6%B7%B1%E5%A4%8D%E5%88%B6%E5%92%8C%E6%B5%85%E5%A4%8D%E5%88%B6%E5%8E%9F%E7%90%86"><span class="toc-number">1.46.</span> <span class="toc-text">46. jquery的$.extend深复制和浅复制原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#47-jquery-extend-%E4%B8%8E-jquery-fn-extend%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-number">1.47.</span> <span class="toc-text">47. jquery.extend 与 jquery.fn.extend的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#48-%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E5%BD%93%E5%89%8D%E8%84%9A%E6%9C%AC%E8%BF%90%E8%A1%8C%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E8%BF%98%E6%98%AFnode%E7%8E%AF%E5%A2%83%E4%B8%AD%EF%BC%9F%EF%BC%88%E9%98%BF%E9%87%8C%EF%BC%89"><span class="toc-number">1.48.</span> <span class="toc-text">48. 如何判断当前脚本运行在浏览器还是node环境中？（阿里）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#49-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E9%A1%B5%E9%9D%A2%E6%93%8D%E4%BD%9C%E4%B8%8D%E4%BC%9A%E6%95%B4%E9%A1%B5%E5%88%B7%E6%96%B0%E7%9A%84%E7%BD%91%E7%AB%99%EF%BC%8C%E5%B9%B6%E4%B8%94%E8%83%BD%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%89%8D%E8%BF%9B%E3%80%81%E5%90%8E%E9%80%80%E6%97%B6%E6%AD%A3%E7%A1%AE%E5%93%8D%E5%BA%94%E3%80%82%E7%BB%99%E5%87%BA%E4%BD%A0%E7%9A%84%E6%8A%80%E6%9C%AF%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88%EF%BC%9F"><span class="toc-number">1.49.</span> <span class="toc-text">49. 实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#50-%E6%8A%8A-Script-%E6%A0%87%E7%AD%BE-%E6%94%BE%E5%9C%A8%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%9C%80%E5%BA%95%E9%83%A8%E7%9A%84body%E5%B0%81%E9%97%AD%E4%B9%8B%E5%89%8D-%E5%92%8C%E5%B0%81%E9%97%AD%E4%B9%8B%E5%90%8E%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BC%9A%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90%E5%AE%83%E4%BB%AC%EF%BC%9F"><span class="toc-number">1.50.</span> <span class="toc-text">50. 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#51-JQuery%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E5%8F%AF%E4%BB%A5%E5%90%8C%E6%97%B6%E7%BB%91%E5%AE%9A%E5%A4%9A%E4%B8%AA%E4%BA%8B%E4%BB%B6%EF%BC%8C%E8%BF%99%E6%98%AF%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%9A%84%EF%BC%9F"><span class="toc-number">1.51.</span> <span class="toc-text">51. JQuery一个对象可以同时绑定多个事件，这是如何实现的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#52-%E4%BB%80%E4%B9%88%E6%98%AF%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%EF%BC%9F%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E7%9A%84-%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86"><span class="toc-number">1.52.</span> <span class="toc-text">52. 什么是前端路由？前端路由的 实现原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#53-%E6%A3%80%E6%B5%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E7%89%88%E6%9C%AC%E7%89%88%E6%9C%AC%E6%9C%89%E5%93%AA%E4%BA%9B%E6%96%B9%E5%BC%8F%EF%BC%9F"><span class="toc-number">1.53.</span> <span class="toc-text">53. 检测浏览器版本版本有哪些方式？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#54-%E4%BB%80%E4%B9%88%E6%98%AFPolyfill"><span class="toc-number">1.54.</span> <span class="toc-text">54. 什么是Polyfill?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#55-%E5%81%9A%E7%9A%84%E9%A1%B9%E7%9B%AE%E4%B8%AD%EF%BC%8C%E6%9C%89%E6%B2%A1%E6%9C%89%E7%94%A8%E8%BF%87%E6%88%96%E8%87%AA%E5%B7%B1%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%BA%9B-polyfill-%E6%96%B9%E6%A1%88%EF%BC%88%E5%85%BC%E5%AE%B9%E6%80%A7%E5%A4%84%E7%90%86%E6%96%B9%E6%A1%88%EF%BC%89%EF%BC%9F"><span class="toc-number">1.55.</span> <span class="toc-text">55. 做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#56-%E6%88%91%E4%BB%AC%E7%BB%99%E4%B8%80%E4%B8%AAdom%E5%90%8C%E6%97%B6%E7%BB%91%E5%AE%9A%E4%B8%A4%E4%B8%AA%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%EF%BC%8C%E4%B8%80%E4%B8%AA%E7%94%A8%E6%8D%95%E8%8E%B7%EF%BC%8C%E4%B8%80%E4%B8%AA%E7%94%A8%E5%86%92%E6%B3%A1%E3%80%82%E4%BC%9A%E6%89%A7%E8%A1%8C%E5%87%A0%E6%AC%A1%E4%BA%8B%E4%BB%B6%EF%BC%8C%E4%BC%9A%E5%85%88%E6%89%A7%E8%A1%8C%E5%86%92%E6%B3%A1%E8%BF%98%E6%98%AF%E6%8D%95%E8%8E%B7%EF%BC%9F"><span class="toc-number">1.56.</span> <span class="toc-text">56. 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#57-Webpack%E7%83%AD%E6%9B%B4%E6%96%B0%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86"><span class="toc-number">1.57.</span> <span class="toc-text">57. Webpack热更新实现原理?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#58-%E5%87%BD%E6%95%B0%E8%8A%82%E6%B5%81%E5%92%8C%E9%98%B2%E6%8A%96"><span class="toc-number">1.58.</span> <span class="toc-text">58. 函数节流和防抖</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#59-%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E6%80%8E%E4%B9%88%E6%93%8D%E4%BD%9C%EF%BC%9F"><span class="toc-number">1.59.</span> <span class="toc-text">59. 页面重构怎么操作？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#60-%E5%88%97%E4%B8%BEIE%E4%B8%8E%E5%85%B6%E4%BB%96%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E4%B8%80%E6%A0%B7%E7%9A%84%E7%89%B9%E6%80%A7"><span class="toc-number">1.60.</span> <span class="toc-text">60. 列举IE与其他浏览器不一样的特性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#61-%E5%AF%B9Node%E7%9A%84%E4%BC%98%E7%82%B9%E5%92%8C%E7%BC%BA%E7%82%B9%E6%8F%90%E5%87%BA%E4%BA%86%E8%87%AA%E5%B7%B1%E7%9A%84%E7%9C%8B%E6%B3%95%EF%BC%9F"><span class="toc-number">1.61.</span> <span class="toc-text">61. 对Node的优点和缺点提出了自己的看法？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#62-%E4%BD%A0%E6%9C%89%E7%94%A8%E8%BF%87%E5%93%AA%E4%BA%9B%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%9F"><span class="toc-number">1.62.</span> <span class="toc-text">62. 你有用过哪些前端性能优化的方法？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#63-http"><span class="toc-number">1.63.</span> <span class="toc-text">63. http</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#64-%E4%B8%80%E4%B8%AA%E9%A1%B5%E9%9D%A2%E4%BB%8E%E8%BE%93%E5%85%A5-URL-%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E6%98%BE%E7%A4%BA%E5%AE%8C%E6%88%90%EF%BC%8C%E8%BF%99%E4%B8%AA%E8%BF%87%E7%A8%8B%E4%B8%AD%E9%83%BD%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F%EF%BC%88%E6%B5%81%E7%A8%8B%E8%AF%B4%E7%9A%84%E8%B6%8A%E8%AF%A6%E7%BB%86%E8%B6%8A%E5%A5%BD%EF%BC%89"><span class="toc-number">1.64.</span> <span class="toc-text">64. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#65-%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90"><span class="toc-number">1.65.</span> <span class="toc-text">65. 前端学习资源</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#66-%E9%82%AE%E7%AE%B1%E9%AA%8C%E8%AF%81"><span class="toc-number">1.66.</span> <span class="toc-text">66. 邮箱验证</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#67-ajax%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%E5%8F%8A%E6%96%B9%E6%B3%95%E4%BD%BF%E7%94%A8"><span class="toc-number">1.67.</span> <span class="toc-text">67. ajax实现原理及方法使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#68-js%E5%AE%9E%E7%8E%B0%E7%BB%A7%E6%89%BF"><span class="toc-number">1.68.</span> <span class="toc-text">68. js实现继承</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#69-%E7%94%A8generator%E5%AE%9E%E7%8E%B0es7%E7%9A%84async"><span class="toc-number">1.69.</span> <span class="toc-text">69. 用generator实现es7的async</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#73-button%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">1.70.</span> <span class="toc-text">73. button注意事项</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#74-%E7%A7%BB%E5%8A%A8%E7%AB%AFhtml%E6%A0%87%E7%AD%BE%E5%87%A0%E4%B8%AA%E4%BD%93%E9%AA%8C%E4%BC%98%E5%8C%96"><span class="toc-number">1.71.</span> <span class="toc-text">74. 移动端html标签几个体验优化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#75-%E6%89%8B%E6%9C%BA%E4%B8%8A%E7%9A%84%E5%A4%9A%E8%A1%8C%E7%9C%81%E7%95%A5"><span class="toc-number">1.72.</span> <span class="toc-text">75.手机上的多行省略</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#76-%E9%95%BF%E6%97%B6%E9%97%B4%E6%8C%89%E4%BD%8F%E9%A1%B5%E9%9D%A2%E9%97%AA%E9%80%80"><span class="toc-number">1.73.</span> <span class="toc-text">76. 长时间按住页面闪退</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#77-%E6%94%B9%E5%8F%98%E8%BE%93%E5%85%A5%E6%A1%86%E5%86%85%E6%8F%90%E7%A4%BA%E6%96%87%E5%AD%97%E9%A2%9C%E8%89%B2"><span class="toc-number">1.74.</span> <span class="toc-text">77. 改变输入框内提示文字颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#78-%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%E9%9F%B3%E4%B9%90"><span class="toc-number">1.75.</span> <span class="toc-text">78. 自动播放音乐</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#79-%E6%B6%88%E9%99%A4transtration%E9%97%AA%E5%B1%8F"><span class="toc-number">1.76.</span> <span class="toc-text">79.消除transtration闪屏</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9C%80%E5%90%8E"><span class="toc-number">1.76.0.1.</span> <span class="toc-text">最后</span></a></li></ol></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2022/10/12/04-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87%EF%BC%89/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87/" title="性能优化面试题"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="性能优化面试题"/></a><div class="content"><a class="title" href="/2022/10/12/04-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87%EF%BC%89/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87/" title="性能优化面试题">性能优化面试题</a><time datetime="2022-10-12T12:01:36.000Z" title="Created 2022-10-12 20:01:36">2022-10-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS字符串方法"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS字符串方法"/></a><div class="content"><a class="title" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS字符串方法">JS字符串方法</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS对象方法"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS对象方法"/></a><div class="content"><a class="title" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS对象方法">JS对象方法</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E6%9F%A5%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS数组方法"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS数组方法"/></a><div class="content"><a class="title" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E6%9F%A5%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS数组方法">JS数组方法</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/07-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%89%8B%E5%86%99%E7%AF%87%EF%BC%89/%E5%BC%80%E5%8F%91%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0/" title="开发封装函数"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="开发封装函数"/></a><div class="content"><a class="title" href="/2022/10/11/07-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%89%8B%E5%86%99%E7%AF%87%EF%BC%89/%E5%BC%80%E5%8F%91%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0/" title="开发封装函数">开发封装函数</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2022 By 孙志豪</div><div class="framework-info"><span>Framework </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="Read Mode"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="Switch Between Light And Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle between single-column and double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="Setting"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="Table Of Contents"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="Back To Top"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">Search</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  Loading the Database</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="Search for Posts" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>